import { useEffect, useState } from 'react';
import './ChildrenCondition.scss'
import { localGetTestListAPI } from '@/apis/student';
import StudentConditionShow from './components/StudentConditionShow/StudentConditionShow';
import { localGetLearnConditionAPI } from '@/apis/student';
import { fetchGetPartList,fetchGetLearnCondition } from '@/store/modules/parent';
import { useSelector,useDispatch } from 'react-redux';

function ChildrenCondition() {
    const { user_status } = useSelector(state => state.user);
    const { partList,learnCondition } = useSelector(state => state.parent);
    const dispatch = useDispatch();
    const [testData,setTestData] = useState([]);
    const [learnAdvice, setAdvice] = useState({});

    useEffect(()=>{
        async function getTestData(){
            await dispatch(fetchGetPartList({
                student_id:user_status.student_id,
                class_id:user_status.class_id
            },user_status.token))
        }

        async function getAdvice(){
            // const res = await localGetLearnConditionAPI();
            // setAdvice(res.data);
            await dispatch(fetchGetLearnCondition({
                student_id:user_status.student_id,
                class_id:user_status.class_id
            },user_status.token))
        }

        getTestData();
        getAdvice();
    },[])

    return (
        <div className="ChildrenCondition">
            <h1>学习情况</h1>
            <section className='learn-condition'>
                <ul>
                    {partList.map((ele,index) => 
                        <li key={index}>
                            <span>第{ele.partid}章测试</span>
                            <span>{`(总分：${ele.total_points})`}</span>
                            <span>
                                {ele.test_done_or_not===1?`得分：${ele.percent}`:`尚未完成`}
                            </span>
                        </li>
                    )}
                </ul>
                <StudentConditionShow testData={partList}/>
            </section>
            <h1>规划建议</h1>
            <section className='advice'>
                <p className='short-comings'>{learnCondition.situation}</p>
            </section>
        </div>
    )
}

export default ChildrenCondition;